<template>
  <view class="pages">
    <!-- #ifdef APP-PLUS -->
    <div class="status_bar"></div>
    <!-- #endif -->
    <my-collect
      :status="companyInfo.status"
      :company_id="companyInfo.supplier_id"
      :from="'shop'"
    ></my-collect>
    <view class="contents">
      <div class="card row_between">
        <div class="card-left column_evenly">
          <div class="card-left-title one_ellipsis">
            {{ companyInfo.company_details.company_name || "暂无数据" }}
          </div>
          <div class="card-left-tab column_start">
            <div class="tip row_between">
              <span class="tip-content one_ellipsis">{{
                companyInfo.categorys
              }}</span>
              <span class="tip-sold"
                >已售 {{ companyInfo.company_details.order_count || "0" }}</span
              >
            </div>
            <div class="condition">
              <div class="title time">
                配送时间
                <span class="times"
                  >{{ companyInfo.company_details.open_time | timeFilter }} -
                  {{ companyInfo.company_details.end_time | timeFilter }}</span
                >
              </div>
              <div class="title">
                <span class="money"
                  >￥
                  {{ companyInfo.company_details.starting_price || "0" }}</span
                >起送
              </div>
            </div>
            <div class="address">
              <span class="address-info"
                >地址：{{
                  companyInfo.company_details.company_address || "暂无"
                }}</span
              >
              <!--  @click.stop="call(item.company_details.site_phone)" -->
              <!-- <div class="iphone">
                <image src="/static/image/iphone.png"></image>
              </div> -->
            </div>
          </div>
        </div>
        <div class="card-right">
          <image
            :src="
              'https://copartner.oss-cn-beijing.aliyuncs.com/' +
                companyInfo.company_details.site_logo ||
              '../../static/image/logo.jpg'
            "
          >
          </image>
        </div>
      </div>

      <div class="shop">
        <div class="classifi" :style="classiLength">
          <div
            class="classifi-item column_start"
            v-for="(item, index) in classifiList"
            :key="index"
            @click="navTo(item, index)"
          >
            <image :src="item.icon || '../../static/image/logo.jpg'"></image>
            <span class="classifi-item-span one_ellipsis">{{
              item.name || "暂无"
            }}</span>
          </div>
        </div>
      </div>

      <!-- 商品 -->
      <div class="shopBox" :style="shopLists">
        <div
          class="shopBox-item"
          v-for="(item, index) in shopList"
          :key="index"
          @click="deleteInfo(item)"
        >
          <div class="shopBox-item-img">
            <image :src="item.img || '../../static/image/logo.jpg'"></image>
          </div>
          <span class="shopBox-item-title">{{ item.name }}</span>
          <div class="shopBox-item-num row_between">
            <div class="shopBox-item-num-price">
              ￥<span class="num">{{ item.spu | spuChange }}</span>
            </div>
            <div class="icons" @click.stop="addShop(index)">+</div>
          </div>
        </div>
      </div>
      <!-- <view v-if="toNext" @click="toNextAction" class="tonext flex-center">{{ bottomText }}
        <text style="color: red; margin-left: 10rpx">{{
          next_category_name
        }}</text>
      </view>
      <view class="nodata" v-if="goods_list.length == 0">
        <image :src="nodataImg" mode="aspectFit"></image>
        <view>该分类暂时还没有商品~</view>
      </view> -->
      <my-addcart
        ref="minicart"
        :canshowprice="canshowprice"
        @tabBarTag="changeTabBarTag"
      ></my-addcart>
    </view>
    <my-tabar :types="2" ref="tabar" current="0"></my-tabar>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
// #ifdef H5
const wx = require("jweixin-module");
// #endif
// #ifdef MP-WEIXIN
let plugin = requirePlugin("WechatSI");
// #endif
export default {
  computed: {
    ...mapState(["companyInfo"]),
    shopLists() {
      return {
        "--length": this.shopList.length,
      };
    },
    classiLength() {
      return {
        "--classLength": this.classifiList.length,
      };
    },
  },
  data() {
    return {
      classifiList: [],
      shopList: [],
      canshowprice: false,
      selectInfo: null,
      page: 1, // 当前页数
      count: 0, // 当前公司总数
    };
  },
  filters: {
    timeFilter: function (value) {
      if (!value) return "暂无";
      return value.slice(0, 5);
    },
    spuChange(item) {
      let list = item.map((item) => Number(item.market_price)).sort();
      if (list.length == 1) {
        return list[0];
      } else {
        return list[0] + "~" + list.at(-1);
      }
    },
  },
  onShow() {
    console.log(this.companyInfo);
    if (this.companyInfo) {
      // 获取供应链商品
      this.getShopInfo();
      // 获取购物车商品
      this.getCard();
      // 获取导航配置
      this.menuList();
    } else {
      this.$store.commit("changeCompanyInfo", null);
      uni.switchTab({
        url: "/pages/tabar/index",
      });
    }
  },
  methods: {
    deleteInfo(info) {
      uni.navigateTo({
        url: `/pages/index/shopdetail?id=${info.goods_id}&company_id=${this.companyInfo.supplier_id}`,
      });
    },
    menuList() {
      $https(
        "GETN",
        `index?company_id=${this.companyInfo.supplier_id}`,
        {},
        (res) => {
          if (res.data.errcode == 0) {
            this.classifiList = res.data.data.nav;
          }
        }
      );
    },
    getShopInfo(page = 1) {
      let data = {
        page: page,
        size: 15,
        company_id: this.companyInfo.supplier_id,
      };
      $https("GET", "getGoodsSelect", data, (res) => {
        if (res.data.errcode == 0) {
          // 获取一级分类(最多只展示10个分类,多余的自动删除)
          // let list = res.data.data.first_list
          // this.classifiList = []
          if (page == 1) this.shopList = [];

          // list.forEach((item, index) => {
          //   if (index <= 9) {
          //     this.classifiList.push(item)
          //   }
          // })
          res.data.data.list.forEach((item) => {
            this.shopList.push(item);
          });
          this.count = res.data.data.count;
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    getCard() {
      $https(
        "GETN",
        `getCart?company_id=${this.companyInfo.supplier_id}`,
        {},
        (res) => {
          this.$refs.tabar.changetag(res.data.data.all_cart_num);
        }
      );
    },
    addShop(index) {
      var data = this.shopList[index];
      this.$refs.minicart.open(data);
    },
    changeTabBarTag(num) {
      //改变底部导航栏购物车tag
      this.$refs.tabar.changetag(num);
    },
    navTo(item, index) {
      this.$store.commit("changeClassfi", item);
      this.$store.commit("changeCurrent", index);
      uni.switchTab({
        url: "/pages/tabar/classify",
      });
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    //如果请求到底就请求下一列表
    if (this.shopList.length < this.count) {
      this.page++;
      this.getShopInfo(
        this.page
        // {
        //   pid: this.pid,
        //   category_id: this.category_id,
        // },
        // this.secondIndex + 1
      );
    } else {
      // this.toNext = true;
      // if (!this.next_category_id) {
      //   this.bottomText = "没有更多啦~";
      // } else {
      //   this.bottomText = "点击加载";
      // }
    }
  },
  onUnload() {
    console.log("页面卸载");
  },
};
</script>

<style lang="scss" scoped>
$length: var(--length) / 2;
$classLengths: var(--classLength) / 5;

/deep/.u-drawer {
  overflow: unset !important;
}

.pages {
  position: relative;
  font-size: 24rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background: #f6f6f6;

  .bg_img {
    width: 750rpx;
    height: 120rpx;
    position: absolute;
    background-color: #fff;
    z-index: 0;
  }

  .contents {
    width: 100%;
    margin-top: var(--status-bar-height);

    .card {
      width: 672rpx;
      margin: 20rpx auto 0;
      background-image: linear-gradient(#fff9f1, #fff1e6);
      padding: 20rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      align-items: center;

      &-left {
        &-title {
          font-size: 30rpx;
          color: #333;
          font-weight: 600;
          width: 450rpx;
        }

        &-tab {
          margin-top: 20rpx;
          align-items: center;

          .tip {
            align-items: center;

            &-content {
              font-size: 26rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #656565;
              width: 300rpx;
            }

            &-sold {
              width: 150rpx;
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #656565;
              white-space: nowrap;
              text-align: right;
            }
          }

          .seg {
            width: 450rpx;
            height: 1rpx;
            background-color: #e5e5e5;
            margin-top: 20rpx;
            margin-bottom: 20rpx;
          }

          .condition {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 450rpx;
            margin-top: 20rpx;

            .title {
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #656565;
              white-space: nowrap;
            }

            .time {
              background-color: #fff5e7;
              width: 260rpx;
            }

            .times {
              color: #d75131;
              margin-left: 10rpx;
            }

            .money {
              color: #d75131;
              margin-right: 10rpx;
            }
          }

          .address {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 450rpx;
            margin-top: 20rpx;

            &-info {
              width: 100%;
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #656565;
            }

            .iphone {
              width: 38rpx;
              height: 38rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              image {
                width: 80%;
                height: 80%;
              }
            }
          }
        }

        &-rank {
          font-size: 22rpx;
          font-weight: 500;
          color: #999;
          margin-top: 20rpx;
          width: 450rpx;
        }
      }

      &-right {
        width: 129rpx;
        height: 129rpx;
        border-radius: 10rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .shop {
      width: 710rpx;
      background-color: #fff;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      padding: 20rpx;

      .classifi {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(var(--classLengths), 130rpx);
        gap: 20rpx;

        &-item {
          align-items: center;
          justify-content: center;

          image {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50% 50%;
          }

          &-span {
            font-size: 22rpx;
            font-weight: 500;
            color: #333;
            width: 100rpx;
            margin-top: 20rpx;
            text-align: center;
          }
        }
      }
    }

    .shopBox {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat($length, 300rpx);
      margin-top: 20rpx;
      gap: 20rpx;
      padding: 0 20rpx;

      &-item {
        border-radius: 20rpx;
        background-color: #fff;

        &-img {
          width: 200rpx;
          height: 200rpx;
          margin: 20rpx auto 0;
          border-radius: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        &-title {
          padding: 0 20rpx;
          font-size: 26rpx;
          font-weight: 500;
          color: #333;
          display: inline-block;
          width: calc(100% - 40rpx);
          white-space: pre-wrap;
          margin: 20rpx auto 0;
        }

        &-num {
          align-items: center;
          padding: 0 20rpx 20rpx;
          margin: 20rpx auto 0;

          &-price {
            font-size: 20rpx;
            color: #d75131;

            .num {
              font-size: 24rpx;
            }
          }

          .icons {
            width: 40rpx;
            height: 40rpx;
            background-color: #12a38c;
            text-align: center;
            line-height: 38rpx;
            border-radius: 10rpx;
          }
        }
      }
    }
  }
}

/deep/.uniui-star-filled {
  color: #12a38c !important;
}
</style>
